<template>
  <div class="goodlist">
    <div class="liBox" v-for="(item,index) in goodsArr" :key="index" @click="goodInfo(item.id)">
      <img :src="item.img_url" alt />
      <h3>{{ item.title }}</h3>
      <div class="money">
        <span class="new">￥{{ item.sell_price }}</span>
        <s class="old">￥{{ item.market_price }}</s>
      </div>
      <div class="foot">热卖中剩余{{item.stock_quantity}}件</div>
    </div>
    <mt-button type="primary" size="large" plain @click="GoodsMore">查看更多</mt-button>
  </div>
</template>
<script>
export default {
    data(){
        return{
            number: 1,
            goodsArr: []
        }
    },
    created(){
        this.getGoods()
    },
    methods: {
        getGoods(){
            this.axios.get("api/getgoods?pageindex="+this.number).then(res=>{
                console.log(res.data.message);
                this.goodsArr=this.goodsArr.concat(res.data.message)
            })
        },
        GoodsMore(){
            this.number++
            this.getGoods()
        },
        goodInfo(id){
          //编程式导航
            this.$router.push({path: "/Home/goodsInfo/"+id})
        }
    }
};
</script>
<style lang="less" scoped>
.goodlist {
  display: flex;
  flex-wrap: wrap;
  padding: 7px;
  display: flex;
  justify-content: space-between;
  .liBox {
    width: 49%;
    border: 1px solid #ccc;
    margin-top: 5px;
    box-shadow: 0 0 8px #ccc;
    background-color: #ccc;
    img {
      width: 100%;
    }
    h3 {
      font-size: 15px;
    }
    .money {
      .new {
        font-size: 15px;
        color: red;
        font-weight: 700;
      }
      .old {
        font-size: 13px;
        color: green;
        margin-left: 20px;
      }
    }
    .foot {
      width: 100%;
      font-size: 15px;
      color: goldenrod;
    }
  }
}
</style>